<script lang="ts" setup>
import { ref, watch } from 'vue'
import type { ArticleItem, ArticleData } from '@/types/article'
import JkSelect from '@/components/JkSelect.vue'
import { getArticleListApi, deleteArticleItemApi } from '@/apis/article'
import { Delete, Edit,} from '@element-plus/icons-vue'
import router from '@/router'
// 查询参数
const queryData = ref<ArticleData>({
  status: undefined,
  begin_pubdate: null,
  end_pubdate: null,
  channel_id: null,
  page: 1,
  per_page: 2
})

// 日期处理
const dateRes = ref<string[] | null>([])
watch(dateRes, (newValue) => {
  if (newValue === null) {
    queryData.value.begin_pubdate = null
    queryData.value.end_pubdate = null
  } else {
    queryData.value.begin_pubdate = newValue[0]
    queryData.value.end_pubdate = newValue[1]
  }
}, { deep: true})

// 分页
const total = ref<number>(0)

// 获取文章列表数据
const articleList = ref<ArticleItem[]>([])
const getArticleList = async () => {
  const res = await getArticleListApi(queryData.value)
  articleList.value = res.data.data.results
  total.value = res.data.data.total_count
}
getArticleList()

// 删除文章
const deleteArticleItem = (id: string) => {
  ElMessageBox.confirm(
    '你真的要删除吗? 我的同志！',
    '确认删除',
    {
      confirmButtonText: '狠心删除',
      cancelButtonText: '不狠心',
      type: 'warning',
    }
  ).then(async () => {
    await deleteArticleItemApi(id)
    ElMessage({
      message: '删除成功',
      type: 'success'
    })
    getArticleList()
  }).catch(() => {
    ElMessage({
      message: '已取消删除',
      type: 'info'
    })
  })
}

// 编辑文章
const editArticle = (id: string) => {
  router.push({
    name: 'publish',
    params: { id }
  })
}

</script>

<template>
  <div>
    <el-card>
      <template v-slot:header>
        <div>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item to="/overview">首页</el-breadcrumb-item>
            <el-breadcrumb-item>内容管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </template>
      <el-form label-width="80px">
        <el-form-item label="状态：">
          <el-radio-group :modelValue = "queryData.status" @update:modelValue="queryData.status = $event">
            <!-- 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败，不传为全部 -->
            <el-radio :value="null">全部</el-radio>
            <el-radio :value="0">草稿</el-radio>
            <el-radio :value="1">待审核</el-radio>
            <el-radio :value="2">审核通过</el-radio>
            <el-radio :value="3">审核失败</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="频道：">
          <JkSelect v-model="queryData.channel_id"></JkSelect>
        </el-form-item>

        <el-form-item label="日期：">
          <div class="data-box">
              <el-date-picker
                v-model="dateRes"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item label="">
          <el-button type="primary" @click="getArticleList">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="always" style="margin-top: 20px;">
      <div class="header">
        <p>根据筛选条件共查询到 {{ total }} 条结果：</p>
      </div>
      <el-table :data="articleList" style="margin: 20px 0;" >
        <!-- 封面 标题 状态 发布时间 阅读数 评论数 点赞数 操作 -->
        <el-table-column label="封面">
          <template v-slot="scope">
            <div class="demo-image__preview" v-if="scope.row.cover.images[0]">
              <el-image
              :hide-on-click-modal="true"
              style="width: 100px; height: 100px;"
              :src="scope.row.cover.images[0]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="scope.row.cover.images"
              :initial-index="4"
              :preview-teleported="true"
            />
            </div>
            <img src="@/assets/wutu.png" width="100" height="100"  v-else>
          </template>
        </el-table-column>

        <el-table-column prop="title" label="标题">
        </el-table-column>

        <el-table-column prop="status" label="状态">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 0" type="info">草稿</el-tag>
            <el-tag v-else-if="scope.row.status === 1" type="warning">待审核</el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="success">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status === 3" type="danger">审核失败</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="pubdate" label="发布时间" width="200px"></el-table-column>

        <el-table-column prop="read_count" label="阅读数"></el-table-column>

        <el-table-column prop="comment_count" label="评论数"></el-table-column>

        <el-table-column prop="like_count" label="点赞数"></el-table-column>

        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" :icon="Edit" circle @click="editArticle(scope.row.id)" />
            <el-button type="danger" :icon="Delete" circle @click="deleteArticleItem(scope.row.id)" />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        v-model:current-page = "queryData.page"
        :page-sizes = "[2, 4, 6, 8]"
        v-model:page-size = "queryData.per_page"
        @current-change = "getArticleList()"
        @size-change = "getArticleList()"
        layout = "total, sizes, prev, pager, next, jumper"
        :total = "total"
      >
      </el-pagination>

    </el-card>
  </div>
</template>

<style lang="less" scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>